<template>
  <div class="categories">
    <div class="page-header">
      <h2>分类管理</h2>
      <button class="btn" @click="showAddCategory = true">添加分类</button>
    </div>

    <div class="card">
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>分类名称</th>
            <th>描述</th>
            <th>商品数量</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="category in categories" :key="category.id">
            <td>{{ category.id }}</td>
            <td>{{ category.name }}</td>
            <td>{{ category.description }}</td>
            <td>{{ category.productCount }}</td>
            <td>
              <span :class="['status', category.status]">
                {{ category.status === 'active' ? '启用' : '禁用' }}
              </span>
            </td>
            <td>{{ category.createdAt }}</td>
            <td>
              <button class="btn" @click="editCategory(category)">编辑</button>
              <button class="btn btn-danger" @click="deleteCategory(category.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加/编辑分类弹窗 -->
    <div v-if="showAddCategory || editingCategory" class="modal-overlay" @click="closeModal">
      <div class="modal" @click.stop>
        <h3>{{ editingCategory ? '编辑分类' : '添加分类' }}</h3>
        <form @submit.prevent="saveCategory">
          <div class="form-group">
            <label>分类名称</label>
            <input 
              type="text" 
              class="form-control" 
              v-model="categoryForm.name" 
              required
            />
          </div>
          <div class="form-group">
            <label>分类描述</label>
            <textarea 
              class="form-control" 
              v-model="categoryForm.description"
              rows="3"
            ></textarea>
          </div>
          <div class="form-group">
            <label>排序</label>
            <input 
              type="number" 
              class="form-control" 
              v-model="categoryForm.sortOrder" 
              min="0"
            />
          </div>
          <div class="form-group">
            <label>状态</label>
            <select class="form-control" v-model="categoryForm.status">
              <option value="active">启用</option>
              <option value="inactive">禁用</option>
            </select>
          </div>
          <div class="form-group">
            <label>图标</label>
            <input 
              type="text" 
              class="form-control" 
              v-model="categoryForm.icon"
              placeholder="图标类名或URL"
            />
          </div>
          <div class="form-actions">
            <button type="button" class="btn" @click="closeModal">取消</button>
            <button type="submit" class="btn">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Categories',
  data() {
    return {
      categories: [
        {
          id: 1,
          name: '电子产品',
          description: '包括手机、电脑、平板等电子设备',
          productCount: 15,
          status: 'active',
          sortOrder: 1,
          icon: 'fas fa-mobile-alt',
          createdAt: '2023-01-15'
        },
        {
          id: 2,
          name: '服装',
          description: '男装、女装、童装等各类服装',
          productCount: 28,
          status: 'active',
          sortOrder: 2,
          icon: 'fas fa-tshirt',
          createdAt: '2023-01-20'
        },
        {
          id: 3,
          name: '食品',
          description: '零食、饮料、生鲜等食品类商品',
          productCount: 42,
          status: 'active',
          sortOrder: 3,
          icon: 'fas fa-utensils',
          createdAt: '2023-02-10'
        },
        {
          id: 4,
          name: '家居',
          description: '家具、装饰品、生活用品等',
          productCount: 23,
          status: 'active',
          sortOrder: 4,
          icon: 'fas fa-home',
          createdAt: '2023-02-15'
        }
      ],
      showAddCategory: false,
      editingCategory: null,
      categoryForm: {
        name: '',
        description: '',
        sortOrder: 0,
        status: 'active',
        icon: ''
      }
    }
  },
  methods: {
    editCategory(category) {
      this.editingCategory = category
      this.categoryForm = { ...category }
    },
    deleteCategory(id) {
      if (confirm('确定要删除这个分类吗？删除后该分类下的商品将无法显示。')) {
        this.categories = this.categories.filter(category => category.id !== id)
      }
    },
    saveCategory() {
      if (this.editingCategory) {
        // 编辑分类
        const index = this.categories.findIndex(c => c.id === this.editingCategory.id)
        this.categories[index] = { ...this.editingCategory, ...this.categoryForm }
      } else {
        // 添加分类
        const newCategory = {
          id: this.categories.length + 1,
          ...this.categoryForm,
          productCount: 0,
          createdAt: new Date().toISOString().split('T')[0]
        }
        this.categories.push(newCategory)
      }
      this.closeModal()
    },
    closeModal() {
      this.showAddCategory = false
      this.editingCategory = null
      this.categoryForm = {
        name: '',
        description: '',
        sortOrder: 0,
        status: 'active',
        icon: ''
      }
    }
  }
}
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #2c3e50;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status.active {
  background: #d4edda;
  color: #155724;
}

.status.inactive {
  background: #f8d7da;
  color: #721c24;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  padding: 30px;
  border-radius: 8px;
  width: 500px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

.modal h3 {
  margin-bottom: 20px;
  color: #2c3e50;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
</style> 